<template>
  <!-- 淡入动画容器 -->
  <view class="fade-loader" :class="{ show: loaded }">
    <view class="login-container">
      <!-- 顶部装饰模块 -->
      <view class="header-decoration">
        <view class="wave"></view>
      </view>

      <!-- Logo区域模块 -->
      <view class="logo-section">
        <view class="logo-circle">
          <text class="logo-text">登录</text>
        </view>
        <text class="welcome-text">欢迎回来</text>
        <text class="subtitle">请输入您的邮箱信息</text>
      </view>

      <!-- 表单区域模块 -->
      <view class="form-container">
        <!-- 邮箱输入组 -->
        <view class="input-group">
          <view class="input-wrapper">
            <view class="input-icon"><text class="icon">📧</text></view>
            <input class="input-field" placeholder="请输入邮箱" type="text" v-model="email" />
          </view>
        </view>

        <!-- 密码输入组 -->
        <view class="input-group">
          <view class="input-wrapper">
            <view class="input-icon"><text class="icon">🔒</text></view>
            <input class="input-field" placeholder="请输入密码" :password="!showPassword" v-model="password" />
            <!-- 密码可见切换按钮 -->
            <view class="eye-icon" @tap="togglePassword">
              <text class="icon">{{ showPassword ? '👁️' : '👁️‍🗨️' }}</text>
            </view>
          </view>
        </view>

        <!-- 选项行 -->
        <view class="options-row">
          <!-- 记住密码选项 -->
          <view class="remember-section" @tap="toggleRemember">
            <view class="checkbox" :class="{ active: rememberMe }">
              <text class="checkmark" v-if="rememberMe">✓</text>
            </view>
            <text class="option-text">记住密码</text>
          </view>
          <!-- 忘记密码链接 -->
          <text class="forgot-password" @tap="forgotPassword" @click="toPwdPage">忘记密码？</text>
        </view>

        <!-- 登录按钮 -->
        <button class="login-btn" @tap="handleLogin">
          <text class="btn-text">登录</text>
        </button>

        <!-- 注册提示 -->
        <view class="register-hint">
          <text class="hint-text">还没有账号？</text>
          <text class="register-link" @tap="goRegister">立即注册</text>
        </view>

        <!-- 分隔线 -->
        <view class="divider-section">
          <view class="divider-line"></view>
          <text class="divider-text">其他登录方式</text>
          <view class="divider-line"></view>
        </view>

        <!-- 社交登录按钮 -->
        <view class="social-login">
          <view class="social-btn wechat" @tap="wechatLogin">
            <text class="social-icon">💬</text>
            <text class="social-text">微信登录</text>
          </view>
          <view class="social-btn qq" @tap="qqLogin">
            <text class="social-icon">🐧</text>
            <text class="social-text">QQ登录</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import request from '@/api/request.js'

export default {
  data() {
    return {
      loaded: false,       // 页面加载完成标志
      email: '',           // 邮箱输入值
      password: '',        // 密码输入值
      showPassword: false, // 是否显示密码
      rememberMe: false    // 是否记住密码
    }
  },
  
  // 页面加载生命周期
  onLoad() {
    // 延迟显示页面内容，实现淡入效果
    setTimeout(() => {
      this.loaded = true
    }, 400)
  },
  
  // 方法定义
  methods: {
    /**
     * 切换密码可见状态
     */
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    
    /**
     * 跳转到密码找回页面
     */
    toPwdPage() {
      uni.navigateTo({
        url: "/pages/forget/forget"
      })
    },
    
    /**
     * 切换记住密码状态
     */
    toggleRemember() {
      this.rememberMe = !this.rememberMe
    },
    
    /**
     * 处理登录逻辑
     */
    handleLogin() {
      // 处理邮箱格式
      this.email = this.email.trim().toLowerCase()

      // 非空验证
      if (!this.email || !this.password) {
        uni.showToast({ title: "请输入邮箱或密码", icon: 'none' })
        return
      }

      // 邮箱格式验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!emailRegex.test(this.email)) {
        uni.showToast({ title: '邮箱格式不正确', icon: 'none' })
        return
      }

      // 显示加载中
      uni.showLoading({ title: '登录中', mask: true })

      // 调用登录API
      request.post('/login', {
        email: this.email,
        password: this.password
      })
      .then(res => {
        uni.hideLoading()
        if (res.data.code === 1 && res.data.data) {
          const user = res.data.data

          // 保存 token
          uni.setStorageSync('token', user.token)

          // 保存 userId 到全局和本地
          getApp().globalData.userId = user.id
          uni.setStorageSync('userId', user.id)

          uni.showToast({ title: '登录成功', icon: 'success' })

          // 延迟跳转到首页
          setTimeout(() => {
            uni.switchTab({ url: '/pages/AppCenter/AppCenter' })
          }, 1000)
        } else {
          uni.showToast({
            title: res.data.msg || '登录失败',
            icon: 'none'
          })
        }
      })
      .catch(err => {
        uni.hideLoading()
        uni.showToast({ title: '网络请求失败', icon: 'none' })
      })
    },
    
    /**
     * 跳转到忘记密码页面
     */
    forgotPassword() {
      uni.reLaunch({ url: '/pages/forgot-password/forgot-password' })
    },
    
    /**
     * 跳转到注册页面
     */
    goRegister() {
      uni.reLaunch({ url: '/pages/Sign/Sign' })
    },
    
    /**
     * 微信登录
     */
    wechatLogin() {
      console.log('微信登录')
      // TODO: 实现微信登录逻辑
    },
    
    /**
     * QQ登录
     */
    qqLogin() {
      console.log('QQ登录')
      // TODO: 实现QQ登录逻辑
    }
  }
}
</script>
<style lang="scss">
  /* 淡入动画样式 */
  .fade-loader {
    opacity: 0;
    transform: translateY(30rpx);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .fade-loader.show {
    opacity: 1;
    transform: translateY(0);
  }

  /* 主容器样式 */
  .login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
  }

  /* 顶部装饰样式 */
  .header-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200rpx;

    .wave {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 0 0 50% 50%;
      transform: scale(1.2);
    }
  }

  /* Logo区域样式 */
  .logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120rpx 0 80rpx;

    .logo-circle {
      width: 120rpx;
      height: 120rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40rpx;
      backdrop-filter: blur(10rpx);
      border: 2rpx solid rgba(255, 255, 255, 0.3);

      .logo-text {
        color: white;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .welcome-text {
      color: white;
      font-size: 48rpx;
      font-weight: bold;
      margin-bottom: 16rpx;
    }

    .subtitle {
      color: rgba(255, 255, 255, 0.8);
      font-size: 28rpx;
    }
  }

  /* 表单容器样式 */
  .form-container {
    background: white;
    margin: 0 40rpx;
    border-radius: 32rpx;
    padding: 60rpx 40rpx;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
  }

  /* 输入组样式 */
  .input-group {
    margin-bottom: 40rpx;
  }

  /* 输入框包装样式 */
  .input-wrapper {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 20rpx;
    padding: 0 24rpx;
    height: 100rpx;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;

    /* 输入框聚焦样式 */
    &:focus-within {
      border-color: #667eea;
      background: white;
      box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
    }
  }

  /* 输入图标样式 */
  .input-icon {
    margin-right: 20rpx;

    .icon {
      font-size: 32rpx;
    }
  }

  /* 输入框样式 */
  .input-field {
    flex: 1;
    font-size: 32rpx;
    color: #333;
    background: transparent;
    border: none;
    outline: none;

    &::placeholder {
      color: #999;
    }
  }

  /* 眼睛图标样式 */
  .eye-icon {
    padding: 10rpx;

    .icon {
      font-size: 28rpx;
      color: #999;
    }
  }

  /* 选项行样式 */
  .options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50rpx;
  }

  /* 记住密码区域样式 */
  .remember-section {
    display: flex;
    align-items: center;
  }

  /* 复选框样式 */
  .checkbox {
    width: 36rpx;
    height: 36rpx;
    border: 2rpx solid #ddd;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16rpx;
    transition: all 0.3s ease;

    /* 激活状态样式 */
    &.active {
      background: #667eea;
      border-color: #667eea;
    }

    /* 勾选标记样式 */
    .checkmark {
      color: white;
      font-size: 24rpx;
      font-weight: bold;
    }
  }

  /* 选项文字样式 */
  .option-text {
    font-size: 28rpx;
    color: #666;
  }

  /* 忘记密码链接样式 */
  .forgot-password {
    font-size: 28rpx;
    color: #667eea;
    font-weight: 500;
  }

  /* 登录按钮样式 */
  .login-btn {
    width: 100%;
    height: 100rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 20rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;

    /* 按钮按下效果 */
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 5rpx 15rpx rgba(102, 126, 234, 0.3);
    }

    /* 按钮文字样式 */
    .btn-text {
      color: white;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  /* 注册提示样式 */
  .register-hint {
    text-align: center;
    margin-bottom: 50rpx;

    .hint-text {
      color: #999;
      font-size: 28rpx;
    }

    .register-link {
      color: #667eea;
      font-size: 28rpx;
      font-weight: 500;
      margin-left: 8rpx;
    }
  }

  /* 分隔线区域样式 */
  .divider-section {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
  }

  /* 分隔线样式 */
  .divider-line {
    flex: 1;
    height: 2rpx;
    background: #eee;
  }

  /* 分隔文字样式 */
  .divider-text {
    margin: 0 32rpx;
    color: #999;
    font-size: 24rpx;
  }

  /* 社交登录区域样式 */
  .social-login {
    display: flex;
    gap: 20rpx;
  }

  /* 社交按钮样式 */
  .social-btn {
    flex: 1;
    height: 88rpx;
    border: 2rpx solid #eee;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    transition: all 0.3s ease;

    /* 微信按钮按下效果 */
    &.wechat:active {
      border-color: #07c160;
      background: rgba(7, 193, 96, 0.05);
    }

    /* QQ按钮按下效果 */
    &.qq:active {
      border-color: #1296db;
      background: rgba(18, 150, 219, 0.05);
    }

    /* 社交图标样式 */
    .social-icon {
      font-size: 32rpx;
    }

    /* 社交文字样式 */
    .social-text {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }

  /* 响应式适配 */
  @media screen and (max-width: 750rpx) {
    .form-container {
      margin: 0 30rpx;
      padding: 50rpx 30rpx;
    }

    .logo-section {
      padding: 100rpx 0 60rpx;
    }
  }
</style>